<template>
  <div class="club-members">
    <div class="page-header">
      <h1>成员管理</h1>
      <p>管理社团成员信息和权限</p>
    </div>
    
    <!-- 搜索和操作栏 -->
    <div class="toolbar">
      <el-card>
        <el-row :gutter="20" align="middle">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索成员姓名或学号"
              :prefix-icon="Search"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchForm.role"
              placeholder="选择角色"
              clearable
            >
              <el-option label="普通成员" :value="0" />
              <el-option label="管理员" :value="1" />
              <el-option label="社长" :value="2" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button @click="handleAddMember">
              <el-icon><Plus /></el-icon>
              添加成员
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <!-- 成员列表 -->
    <div class="members-section">
      <el-card>
        <el-table
          :data="memberList"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="avatar" label="头像" width="80">
            <template #default="{ row }">
              <el-avatar :size="40" :src="row.avatar_url">
                {{ row.nickname.charAt(0) }}
              </el-avatar>
            </template>
          </el-table-column>
          
          <el-table-column prop="username" label="学号" width="120" />
          
          <el-table-column prop="nickname" label="姓名" width="120" />
          
          <el-table-column prop="email" label="邮箱" min-width="150" />
          
          <el-table-column prop="phone_number" label="手机号" width="130" />
          
          <el-table-column prop="club_role" label="角色" width="100">
            <template #default="{ row }">
              <el-tag :type="getRoleType(row.club_role)">
                {{ getRoleText(row.club_role) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="join_time" label="加入时间" width="150">
            <template #default="{ row }">
              {{ formatDate(row.join_time) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button
                v-if="row.club_role < 2"
                type="primary"
                size="small"
                @click="handleEditRole(row)"
              >
                修改角色
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleRemoveMember(row)"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus } from '@element-plus/icons-vue'

export default {
  name: 'ClubMembers',
  components: {
    Search,
    Plus
  },
  setup() {
    const loading = ref(false)
    
    const searchForm = reactive({
      keyword: '',
      role: ''
    })
    
    const memberList = ref([
      {
        id: 1,
        username: '2021001',
        nickname: '张三',
        avatar_url: '',
        email: 'zhangsan@example.com',
        phone_number: '13800138001',
        club_role: 2, // 社长
        join_time: '2024-01-01 10:00:00'
      },
      {
        id: 2,
        username: '2021002',
        nickname: '李四',
        avatar_url: '',
        email: 'lisi@example.com',
        phone_number: '13800138002',
        club_role: 1, // 管理员
        join_time: '2024-01-05 14:30:00'
      },
      {
        id: 3,
        username: '2021003',
        nickname: '王五',
        avatar_url: '',
        email: 'wangwu@example.com',
        phone_number: '13800138003',
        club_role: 0, // 普通成员
        join_time: '2024-01-10 16:20:00'
      }
    ])
    
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 25
    })
    
    const getRoleType = (role) => {
      const typeMap = {
        0: '',
        1: 'success',
        2: 'danger'
      }
      return typeMap[role] || ''
    }
    
    const getRoleText = (role) => {
      const textMap = {
        0: '普通成员',
        1: '管理员',
        2: '社长'
      }
      return textMap[role] || '未知'
    }
    
    const formatDate = (dateTime) => {
      if (!dateTime) return '未知'
      const date = new Date(dateTime)
      return date.toLocaleDateString('zh-CN')
    }
    
    const handleSearch = () => {
      console.log('搜索条件:', searchForm)
      // 这里实现搜索逻辑
    }
    
    const handleAddMember = () => {
      console.log('添加成员')
      // 这里实现添加成员逻辑
    }
    
    const handleEditRole = (member) => {
      console.log('修改角色:', member)
      // 这里实现修改角色逻辑
    }
    
    const handleRemoveMember = async (member) => {
      try {
        await ElMessageBox.confirm(
          `确定要移除成员 ${member.nickname} 吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        // 这里实现移除成员逻辑
        ElMessage.success('已移除成员')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      // 重新加载数据
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      // 重新加载数据
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      loading,
      searchForm,
      memberList,
      pagination,
      getRoleType,
      getRoleText,
      formatDate,
      handleSearch,
      handleAddMember,
      handleEditRole,
      handleRemoveMember,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.club-members {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .toolbar {
    margin-bottom: 24px;
  }

  .members-section {
    margin-bottom: 24px;
  }

  .pagination-section {
    display: flex;
    justify-content: center;
  }
}
</style>
